<template>
  <div id="second">
    <x-header :left-options="{showBack: false}" @on-click-back="comehome">盘点单 任务中</x-header>
    <x-table :cell-bordered="false" style="background-color:#fff;">
      <thead>
      </thead>
      <tbody>
      <tr>
        <td style="width: 50%">
          <div style="width: 95%; margin-left: 5%;">
            <router-link to="/home">
              <span style="color: #bbc1cd;">工号:</span><span style="color: #343f51">{{sgh}}</span>
            </router-link>
          </div>
        </td>
        <td style="width: 50%">
          <div style="width: 95%;margin-right: 5%; text-align: right">
            <router-link :to="{ path:'/scan/id', query: { gh:  sgh} }">
              <span style="color: #bbc1cd;">卡片数:</span><span
              style="color:#4192f5">{{ssize}}</span></router-link>
          </div>
        </td>
      </tr>

      </tbody>
    </x-table>
    <br>
    <x-table class='chart1' :cell-bordered="false" style="background-color:#fff;" v-show="showtable">
      <thead>
      </thead>
      <tbody>
      <tr>
        <td class="td-left">领用单位名称</td>
        <td class="td-right">{{querydata.bmmc}}</td>
      </tr>
      <tr>
        <td class="td-left">仪器编码</td>
        <td class="td-right">{{querydata.kpbh}}</td>
      </tr>
      <tr>
        <td class="td-left">仪器名称</td>
        <td class="td-right">{{querydata.zcmc}}</td>
      </tr>
      <tr>
        <td class="td-left">品牌</td>
        <td class="td-right"></td>
      </tr>
      <tr>
        <td class="td-left">型号</td>
        <td class="td-right">{{querydata.ggxh}}</td>
      </tr>
      <tr>
        <td class="td-left">购置日期</td>
        <td class="td-right">{{querydata.grrq}}</td>
      </tr>
      <tr>
        <td class="td-left">保内时间</td>
        <td class="td-right"></td>
      </tr>
      <tr>
        <td class="td-left">使用人</td>
        <td class="td-right">{{querydata.syrxm}}</td>
      </tr>
      <tr style="border-bottom: 1px solid #ddd">
        <td class="td-left">安置地点</td>
        <td class="td-right">{{byazdd}}</td>
      </tr>
      <tr>
        <td colspan="2">
          <flexbox style="padding-top: 5px; bottom: 70px ">
            <flexbox-item style="position: relative; font-size: 12px">

              <!--<div :disabled="showbutton" style="background: dodgerblue" @click.native="dialog">安置点</div>-->
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: #f7f7f7;"
                        @click.native="dialog">
                <span class="icon-site"></span><span class="text">安置点</span>
              </x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="confirmdata"><span class="ic_elect"></span><span class="text">确认</span>
              </x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="Revocationazd"><span class="ic_chehui"></span><span class="text">撤销</span>
              </x-button>
            </flexbox-item>
          </flexbox>
        </td>


      </tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      </tbody>
    </x-table>


    <tabbar>
      <tabbar-item>

        <span slot="label"> <x-button type="primary" class="sm-btn" @click.native="ScanCode">扫码盘点</x-button></span>
      </tabbar-item>


    </tabbar>

    <!-- <div v-transfer-dom>
       <x-dialog v-model="show" class="dialog-demo" :dialog-style="{'max-width': '100%', width: '80%','overflow':'inherit'}">
         <p class="dialog-title" style="height: 50px;background:dodgerblue">
           <span class="vux-close"  @click="show=false"></span>

         </p>
         <div class="img-box" style="height: 100%;max_width:100%;width: 100%">
           <x-table style="width: 100%">
             <tbody>
             <tr>
               <td >
                 <group >
                   <selector ref="defaultValueRef" title="" :options="yqlist" v-model="yqdata" @on-change="changeyq" v-verify="yqdata"  placeholder="请选择一个院区位置"  ></selector>
                   <label v-verified="verifyError.yqdata"></label>
                 </group>
               </td>
             </tr>
             <tr>
               <td >
                 <group >
                   <selector ref="defaultValueRef" title="" :options="lqlist" v-model="lqdata"  v-verify="lqdata"  placeholder="请选择一个所在楼的位置"></selector>
                   <label v-verified="verifyError.lqdata"></label>
                 </group>
               </td>
             </tr>
             <tr>
               <td >
                 <group >
                   &lt;!&ndash;  <selector ref="defaultValueRef" title="省份" :options="list" v-model="defaultValue"></selector>&ndash;&gt;
                   <x-input title="" v-model="detailwz"   placeholder="请输入详细位置"  v-verify="detailwz"  ></x-input>
                   <label v-verified="verifyError.detailwz"></label>
                 </group>
               </td>
             </tr>
             <tr>
               <td>
                 <flexbox-item style="margin-top: 10px">
                   <x-button type="primary" style="width: 80%" @click.native="confirmdialog">确认</x-button>
                 </flexbox-item>
               </td>
             </tr>
             </tbody>
           </x-table>
         </div>
       </x-dialog>
     </div>-->
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo"
                :dialog-style="{'max-width': '100%', width: '80%','overflow':'inherit'}">
        <div class="dialog-header"></div>
        <div class="img-box" style="height: 100%;max_width:100%;width: 100%">
          <x-table style="width: 80%;margin-left: auto;margin-right: auto">
            <tbody>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="yqlist" v-model="yqdata" @on-change="changeyq"
                            v-verify="yqdata" placeholder="请选择一个院区位置"></selector>
                  <label class="tip" v-verified="verifyError.yqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="lqlist" v-model="lqdata" v-verify="lqdata"
                            placeholder="请选择一个所在楼的位置"></selector>
                  <label class="tip" v-verified="verifyError.lqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <!--  <selector ref="defaultValueRef" title="省份" :options="list" v-model="defaultValue"></selector>-->
                  <x-input title="" v-model.trim="detailwz" placeholder="请输入详细位置" v-verify="detailwz"></x-input>
                  <label class="tip" v-verified="verifyError.detailwz"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <flexbox-item style="margin-top: 10px">
                  <x-button type="primary" class="btn5" style="width: 80%" @click.native="confirmdialog">确认</x-button>
                </flexbox-item>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
        <p class="close">
          <span class="weui-icon-clear" @click="show=false"></span>
        </p>
        <!--<div class="close">
          <span class="weui-icon-clear" @click="show=false"></span>
        </div>-->
      </x-dialog>
      <!--
            <x-dialog v-model="show" class="dialog-demo" :dialog-style="{'max-width': '100%', width: '80%', height: '60%'}">
              <p class="dialog-title" style="height: 50px;background:dodgerblue">
                <span class="vux-close" @click="show=false"></span>

              </p>
              <div class="img-box" style="height: 100%;max_width:100%;width: 100%">
                <x-table style="width: 100%">
                  <tbody>
                  <tr>
                    <td>
                      <group>
                        <selector ref="defaultValueRef" title="" :options="yqlist" v-model="yqdata" @on-change="changeyq"
                                  v-verify="yqdata" placeholder="请选择一个院区位置"></selector>
                        <label v-verified="verifyError.yqdata"></label>
                      </group>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <group>
                        <selector ref="defaultValueRef" title="" :options="lqlist" v-model="lqdata" v-verify="lqdata"
                                  placeholder="请选择一个所在楼的位置"></selector>
                        <label v-verified="verifyError.lqdata"></label>
                      </group>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <group>
                        &lt;!&ndash;  <selector ref="defaultValueRef" title="省份" :options="list" v-model="defaultValue"></selector>&ndash;&gt;
                        <x-input title="" v-model="detailwz" placeholder="请输入详细位置" v-verify="detailwz"></x-input>
                        <label v-verified="verifyError.detailwz"></label>
                      </group>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <flexbox-item style="margin-top: 10px">
                        <x-button type="primary" style="width: 80%" @click.native="confirmdialog">确认</x-button>
                      </flexbox-item>
                    </td>
                  </tr>
                  </tbody>
                </x-table>
              </div>
            </x-dialog>-->
    </div>


    <div v-transfer-dom>
      <confirm v-model="showazd" :title="confirmtext" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-confirm="onConfirm">
        <p style="text-align:center;">是否撤回安置地点的修改</p>
      </confirm>
    </div>


    <div v-transfer-dom>
      <confirm v-model="showkp" :title="confirmtext" confirm-text="是" theme="ios" cancel-text="否"
               @on-confirm="onConfirmKp">
        <p style="text-align:center;">当前界面有未确认的卡片，是否继续当前操作</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <loading :show="modelshow==1" :text="加载中"></loading>
    </div>
  </div>

</template>

<script>


  import {XTable, LoadMore, XHeader} from 'vux'
  import {XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider} from 'vux'
  import {AjaxPlugin} from 'vux'
  import {XDialog, TransferDomDirective as TransferDom} from 'vux'
  import {CellBox, Checklist, Selector} from 'vux'
  import {Confirm, AlertModule, Alert} from 'vux'
  import {XInput, Cell} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import { Loading } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Flexbox,
      FlexboxItem,
      Group,
      XHeader,
      XDialog,
      CellBox,
      Checklist,
      Selector,
      Confirm,
      Alert,
      XInput,
      Cell,
      Tabbar,
      TabbarItem,
      Loading


    },
    data() {
      return {
        ssize: '',
        sgh: '',
        querydata: '',
        show: false,
        yqdata: '',
        yqlist: [],
        lqdata: '',
        lqlist: [],
        showazd: false,
        AlternateKpbh: '',
        confirmtext: '提示',
        detailwz: '',
        showkp: false,
        byazdd: '',
        azYq: '',
        azWzdz: '',
        showtable: true,
        kpbh: '',
        showbutton: false,
        ConfirmedSize: '',
        secondpageurl: '',
        modelshow:'0'


      }

    },
    methods: {
      comehome(){
        this.$router.replace({path:'/home'});

      },
      dialog() {
        this.yqdata = ''
        this.lqdata = ''
        this.detailwz = ''
        this.show = true
        this.selectyq()

      },
      confirmdata() {
        this.showbutton = true
        var ConfirmCard = {}
        ConfirmCard["gh"] = this.sgh;
        ConfirmCard["kpbh"] = this.AlternateKpbh
        ConfirmCard["lydwmc"] = this.querydata.bmmc;
        ConfirmCard["yqbm"] = this.querydata.zcdm;
        ConfirmCard["yqmc"] = this.querydata.zcmc;
        ConfirmCard["pm"] = '';
        ConfirmCard["xh"] = this.querydata.ggxh;
        ConfirmCard["gzrq"] = this.querydata.grrq
        ConfirmCard["bxrq"] = ''
        ConfirmCard["syrxm"] = this.querydata.syrxm
        ConfirmCard["azYq"] = this.azYq
        ConfirmCard["azWzdz"] = this.azWzdz
        ConfirmCard["azDddress"] = this.detailwz
        ConfirmCard["azAzdd"] = this.azYq + this.azWzdz + this.detailwz
        ConfirmCard["oldazAzdd"]=this.azYq + this.azWzdz + this.detailwz
        ConfirmCard["oldazYq"] = this.azYq
        ConfirmCard["oldazWzdz"] = this.azWzdz
        ConfirmCard["oldazDddress"] = this.detailwz
        console.log(ConfirmCard)

        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/InsertConfirmCard', ConfirmCard)
          .then((data) => {
            if (data.data.i == 1) {
              this.ssize = data.data.size
              this.sgh = data.data.gh
              this.querydata = ''
              this.byazdd = ''
              this.showtable = false
              this.showbutton = true
            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },

      changeyq() {
        if (this.yqdata != '') {
          this.selectlq()

        }


      },
      selectyq() {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QueryBranch_Type')
          .then((data) => {
            console.log(data)
            this.yqlist = data.data.listyq
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      selectlq() {
        var id = this.yqdata;
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QueryBranch?id=' + id)
          .then((data) => {
            this.lqlist = data.data.listlq
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      QuerySecondPage(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QuerySecondPage?gh='+this.sgh+'&kpbh=' + kpbh)
          .then((data) => {
            console.log(data)

            this.sgh = data.data.gh;
            this.ssize = data.data.size;
            this.querydata = data.data.mabassetcard

            if (this.querydata == '') {
              this.showtable = false
              this.showbutton = true
              this.showModuleAuto()

            } else {
              this.showbutton = false
              this.showtable = true
            }


          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      ConfirmedData(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QueryConfirmed?kpbh=' + kpbh)
          .then((data) => {
            this.ConfirmedSize = data.data.ConfirmedSize


          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },


      confirmdialog() {

        if (this.$verify.check()) {
          this.show = false
          var yqname
          var lqname
          for (var a = 0; a < this.yqlist.length; a++) {
            if (this.yqlist[a].key == this.yqdata) {
              yqname = this.yqlist[a].value
            }
          }
          for (var b = 0; b < this.lqlist.length; b++) {
            if (this.lqlist[b].key == this.lqdata) {
              lqname = this.lqlist[b].value
            }
          }
          this.azYq = yqname
          this.azWzdz = lqname

          var azddata = yqname + '' + lqname + '' + this.detailwz
          this.byazdd = azddata
          this.$set(this.querydata, 'azdd', azddata)


        } else {


        }


      },
      Revocationazd() {
        this.showazd = true
      },
      onConfirm() {

        this.showazd = false
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''
      },
      onConfirmKp() {
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''

        var thisobj = this
        if(thisobj.modelshow=='1'){

          return;
        }
        thisobj.modelshow='1'
        var url = window.location.href.split('#')[0]
        AjaxPlugin.$http.post(thisobj.secondpageurl + '/wd-wechart/Validate/wxtest?url=' + encodeURIComponent(url))
          .then((data) => {
            thisobj.modelshow='0'
            this.password2 = data
            var wx = this.$wechat;
            wx.config({
              beta: true,
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: this.password2.data.map.appId, // 必填，公众号的唯一标识
              timestamp: this.password2.data.map.timestamp, // 必填，生成签名的时间戳
              nonceStr: this.password2.data.map.nonceStr, // 必填，生成签名的随机串
              signature: this.password2.data.map.signature,// 必填，签名，见附录1
              jsApiList: [
                'scanQRCode'
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
              wx.scanQRCode({
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                  var str= res.resultStr.replace(/(^\s*)|(\s*$)/g, "");

                  AjaxPlugin.$http.post(thisobj.secondpageurl + '/wd-wechart/Inventory/QueryConfirmed?kpbh=' + res.resultStr+'&gh='+thisobj.sgh)
                    .then((data) => {

                      if (data.data.ConfirmedSize > 0) {
                        thisobj.AlertConfirmedMessage()

                      } else {
                        if (thisobj.AlternateKpbh == str) {
                          thisobj.AlternateKpbh = str
                          thisobj.QuerySecondPage(str)

                        } else {
                          thisobj.byazdd = ''
                          thisobj.AlternateKpbh = str
                          thisobj.QuerySecondPage(str)
                        }
                      }

                    }).catch(e => {
                    // 打印一下错误
                    console.log(e)
                  })


                },
                error: function(res) {
                  if (res.errMsg.indexOf('function_not_exist') > 0) {
                    alert('版本过低请升级')
                  }
                }
              });


            });

          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },
      ScanCode() {
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''
        var thisvue = this
        if (this.querydata != ''){
          this.showkp = true
        }else {
          if(thisvue.modelshow=='1'){
            return;
          }
          thisvue.modelshow='1'
          var url = window.location.href.split('#')[0]
          AjaxPlugin.$http.post(thisvue.secondpageurl+ '/wd-wechart/Validate/wxtest?url=' + encodeURIComponent(url))
            .then((data)=>{
              thisvue.modelshow='0'
              thisvue.password2=data
              var wx = this.$wechat;
              wx.config({
                beta: true,
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: this.password2.data.map.appId, // 必填，公众号的唯一标识
                timestamp: this.password2.data.map.timestamp, // 必填，生成签名的时间戳
                nonceStr: this.password2.data.map.nonceStr, // 必填，生成签名的随机串
                signature: this.password2.data.map.signature,// 必填，签名，见附录1
                jsApiList: [
                  'scanQRCode'

                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });

              wx.ready(function () {
                wx.scanQRCode({
                  desc: 'scanQRCode desc',
                  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                  scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                  success: function (res) {
                    var str= res.resultStr.replace(/(^\s*)|(\s*$)/g, "");
                    AjaxPlugin.$http.post(thisvue.secondpageurl + '/wd-wechart/Inventory/QueryConfirmed?kpbh=' + res.resultStr+'&gh='+thisvue.sgh)
                      .then((data) =>{
                        if (data.data.ConfirmedSize>0){
                          thisvue.AlertConfirmedMessage()
                        }else {
                          if (thisvue.AlternateKpbh == str) {
                            thisvue.AlternateKpbh = str
                            thisvue.QuerySecondPage(str)
                          } else {
                            thisvue.byazdd = ''
                            thisvue.AlternateKpbh = str
                            thisvue.QuerySecondPage(str)
                          }
                        }

                      }).catch(e => {
                      // 打印一下错误
                      console.log(e)
                    })


                  },
                  error: function(res) {
                    if (res.errMsg.indexOf('function_not_exist') > 0) {
                      alert('版本过低请升级')
                    }
                  }
                });


              });




            }).catch(e => {
            // 打印一下错误
            console.log(e)
          })


        }

      },
      showModuleAuto() {
        AlertModule.show({
          title: '',
          content: '当前条码无法识别',
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      },
      AlertConfirmedMessage() {
        AlertModule.show({
          title: '',
          content: '当前的卡片信息已在任务列表中,请勿重复操作',
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      }

    },
    mounted() {
      this.sgh = this.$route.query.gh
      this.ssize = this.$route.query.size
if(this.$route.query.kpbh=='0'){

  AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QueryCardConfirm?gh=' + this.sgh)
          .then((data) => {

            this.sgh = data.data.gh;
            this.ssize  = data.data.size;
            this.querydata=''
            this.showtable = false
            this.showbutton = true
          }).catch(e => {
    // 打印一下错误
    console.log(e)
  })

}else{

      this.AlternateKpbh = this.$route.query.kpbh
      AjaxPlugin.$http.post(this.secondpageurl + '/wd-wechart/Inventory/QueryConfirmed?kpbh=' + this.$route.query.kpbh+'&gh='+this.sgh)
        .then((data) => {
          if (data.data.ConfirmedSize > 0) {
            this.showtable = false
            this.showbutton = true
            this.AlertConfirmedMessage()
          } else {
            this.QuerySecondPage(this.$route.query.kpbh)
          }

        }).catch(e => {
        // 打印一下错误
        console.log(e)
      })

}
    },

    verify: {

      detailwz: "required",
      yqdata: "required",
      lqdata: "required"

    },
    computed: {
      verifyError: function () {
        return this.$verify.$errors;
      }
    }

  }


</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/1px.less';

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .chart1 {
    /* flex: 1; */
    width: 90% !important;
    margin: 0px auto !important;
    margin-bottom: 100px !important;
    background-color: #fff !important;
    border-radius: 10px !important;
  }

  .td-left {
    text-align: left;
    color: #c7ccd6;
    padding-left: 10px
  }

  .td-right {
    text-align: right;
    color: #343f51;
    padding-right: 10px
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .icon-btn {
    display: inline-block !important;
    width: 100% !important;
    height: 35px !important;
    line-height: 35px!important;
    text-align: center !important;
    padding: 0;
    /*padding-left: 16px!important;*/
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
  }

  .icon-btn:after {
    /*margin-left: 10px !important;*/
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .icon-site {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/site.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
  .ic_elect{
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/ic_elect@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
  .ic_chehui{
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/ic_chehui@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
.text{
  font-size: 16px!important;
}
  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }

  .btn5 {
    color: #fff !important;
    background-color: #4786ff !important;
    border-radius: 50px !important;
  }

  .btn5:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .required {
    position: absolute;
    left: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }

  .tip {
    position: absolute;
    right: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
    z-index: 5;
  }

  .dialog-header {
    width: 100%;
    height: 35px;
    background: url("./assets/ic_person@2x.png") no-repeat;
    background-position: right;
    background-size: contain;
    background-color: #4786ff;
  }

  .weui-cells {
    margin-top: 0 !important;
    overflow: inherit!important;
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }


  .sm-btn {
    background-color: #4786ff !important;
  }

  .weui-cell {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:before {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:after {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }


  .weui-cells {
    margin-top: 0 !important;
  }

  .close{
    position:absolute;
    left: 0%;
    right: 0%;
    bottom: -50px;
    z-index: 10;
    text-align: center;
    font-size: 32px;
  }
  .close .weui-icon-clear{
    font-size: 32px;
    color:#fff ;
    opacity: 0.6;
  }
  .vux-close {
    margin-left: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: red;
  }


</style>
